import { EyeOutlined, LikeOutlined, MessageOutlined } from "@ant-design/icons";
import { List, Space, Button, Image } from "antd";
import moment from "moment";
import Link from "next/link";
import React from "react";
import "./index.css";
import { articleControllerRemove } from "@/app/servers/api/article";

export interface ArticlePreviewProps {
  article: API.Article;
  canManage?: boolean;
}

const ArticlePreview: React.FC<ArticlePreviewProps> = ({
  article,
  canManage,
}) => {
  const { desc, imgSrc } = extractFirstTwoHundredChars(article.content);
  return (
    <List.Item
      className="cursor-pointer hover:bg-gray-100 transition-colors rounded-lg"
      key={article.id}
      actions={[
        <div key="1" className="flex justify-between">
          <Space key="actions">
            <Button type="text" icon={<EyeOutlined />}>
              {article.views}
            </Button>
            <Button type="text" icon={<LikeOutlined />}>
              {article.likes}
            </Button>
            <Button type="text" icon={<MessageOutlined />}>
              {article.comments.length}
            </Button>
          </Space>
          {canManage && (
            <Space>
              <Button
                onClick={() => {
                  window.open(
                    `/customer/community/modify-article/${article.id}`
                  );
                }}
                type="primary"
                color="blue"
              >
                编辑
              </Button>
              <Button
                onClick={() => {
                  articleControllerRemove({ id: article.id.toString() });
                }}
                type="primary"
                danger
              >
                删除
              </Button>
            </Space>
          )}
        </div>,
      ]}
    >
      <div className="flex items-center justify-between gap-4">
        <div
          className="flex-1"
          onClick={() => {
            window.open(`/customer/community/detail/${article.id}`);
          }}
        >
          <List.Item.Meta
            title={
              <Link href={`/customer/community/detail/${article.id}`}>
                {article.title}
              </Link>
            }
            description={`作者: ${article.user.username} | 发布时间: ${moment(
              article.createdAt
            ).format("YYYY-MM-DD HH:mm:ss")}`}
          />
          <div className="line-clamp-3">{desc}</div>
        </div>
        {/* eslint-disable-next-line jsx-a11y/alt-text */}
        <Image
          className="rounded-md  items-end"
          width={200}
          preview={false}
          height={100}
          src={imgSrc}
        />
      </div>
    </List.Item>
  );
};

export default ArticlePreview;

const extractFirstTwoHundredChars = (html: string) => {
  if (DOMParser === undefined) {
    return {
      desc: "",
      imgSrc: "",
    };
  }
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");
  let textContent = "";
  const paragraphs = doc.querySelectorAll("p");
  for (let i = 0; i < paragraphs.length && textContent.length < 200; i++) {
    textContent += paragraphs[i].textContent?.trim();
  }
  // 获取第一个图片
  const images = doc.querySelectorAll("img");
  const src = images?.[0]?.src;
  return {
    desc: textContent.slice(0, 200),
    imgSrc: src || "",
  };
};
